<template>
    <div>
        <web-header show="group" />
        <!-- 轮播图 -->
        <div class="banner">
            <!-- <div id="certify">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <volist name="row_banner" id="rs">
                            <div class="swiper-slide">
                                <img src="https://admin.hqx.com.cn/Public/Uploads/{$rs}" />
                            </div>
                        </volist>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div> -->
        </div>
        <groupProgramme style="margin-bottom: 30px"></groupProgramme>
        <div class="big_title">
            <h1>{{data.title}}</h1>
            <div class="price">￥<b>{{data.price}}</b>元/人起</div>
        </div>
        <div class="title_info">
            <ul class="list">
                <li>活动效果：{{data.effect}}</li>
                <li>人数推荐：{{data.nums}}人</li>
                <li>活动报价：{{data.price}}</li>
            </ul>
            <ul class="list2">
                <li><span>赠送：19英寸毕业大合照+精美相框一个。</span></li>
                <li><span>赠送：全程摄影，记录每一个精彩瞬间。</span></li>
                <li><span>赠送：活动主题横幅1条，规格为:（500*70cm）。</span></li>
            </ul>
        </div>
        <div class="box_a">
            <div class="content">
                <div class="top">
                    <ul>
                        <li>方案详情</li>
                        <li>费用说明</li>
                    </ul>
                </div>
                <div class="bottom" v-html="data.content"></div>
            </div>
            <aside>
                <div class="left1">
                    <div class="top">团建方案推荐</div>
                    <ul>
                        <li v-for="rs in list" :key="rs.id">
                        <router-link target="_blank" :to="`/group/programme/${rs.id}`">
                            <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
                            <h3>{{rs.title}}</h3>
                            <span>{{rs.intro}}</span>
                        </router-link>
                    </li>
                    </ul>
                </div>
            </aside>
        </div>
        <web-footer />
    <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { group_items,group_details } from "@/api/travel.js";
import { useRoute } from "vue-router";
import groupProgramme from "@/components/swiper/groupProgramme.vue";
const route = useRoute();

// 后续内容变多做懒加载
let data = ref({});
let list = ref([]);

onMounted(async () => {
    // 详情
    let result = await group_details({id: route.params.id}); 
    data.value = result.data;
    data.value.banner = result.data.banner.split("|").filter((item) => item.trim()).map(item => `https://admin.hqx.com.cn/Public/Uploads/${item}`)
    // 侧边推荐栏
    let res = await group_items({
        ctype: 69,
        page: 1,
        limit: 3,
    });
    list.value = res.data;
});

</script>

<style lang="scss" scoped>
@import "../../css/main_group_programme.css";
</style>
